<div class="page-content">
	<div class="p-4 border-b">
		<h3 class="h3-title hover-edit">
			<span class="layui-btn layui-btn-xs bg-priority-{$detail.priority}">{$detail.priority_name}</span>
			<span id="title_{$detail.id}" data-val="">{$detail.title}</span>
			<i class="iconfont icon-wodedianping" title="编辑" data-name="title"></i>
		</h3>
		<div>
			<span class="layui-badge layui-bg-gray">#T{$detail.id}</span>
			<span class="mx-2">{$detail.admin_name}</span>
			<span class="font-gray">创建于{$detail.times}<span id="editTips">{gt name="$detail.update_time" value="0"}，最近更新于 {:time_trans($detail.update_time)}{/gt}</span></span>
			<span class="layui-btn layui-btn-xs layui-btn-danger ml-4" id="delBtn"><i class="layui-icon">&#xe640;</i>删除</span>
		</div>
	</div>
	<div class="layui-row border-b">
		<div class="layui-col-md9 p-4 border-r">
			<table class="layui-table layui-table-form">
				<tr>
					<td class="layui-td-gray">负责人</td>
					<td class="hover-edit"><span id="director_uid_{$detail.id}" data-val="{$detail.director_uid}">{$detail.director_name}</span><i class="iconfont icon-wodedianping" title="编辑" data-name="director_uid"></i></td>
					<td class="layui-td-gray">协作人</td>
					<td class="hover-edit" colspan="3"><span id="assist_admin_ids_{$detail.id}" data-val="{$detail.assist_admin_ids}">{$detail.assist_admin_names}</span><i class="iconfont icon-wodedianping" title="编辑" data-name="assist_admin_ids"></i></td>
				</tr>
				<tr>
					<td class="layui-td-gray">任务类型</td>
					<td class="hover-edit"><span id="type_{$detail.id}" data-val="{$detail.type}">{$detail.type_name}</span><i class="iconfont icon-wodedianping" title="编辑" data-name="type"></i></td>	
					<td class="layui-td-gray">所属工作类型</td>
					<td class="hover-edit"><span id="cate_{$detail.id}" data-val="{$detail.cate}">{$detail.cate_name}</span><i class="iconfont icon-wodedianping" title="编辑" data-name="cate"></i></td>
					<td class="layui-td-gray">优先级</td>
					<td  class="hover-edit"><span class="color-priority-{$detail.priority}" id="priority_{$detail.id}" data-val="{$detail.priority}">{$detail.priority_name}</span><i class="iconfont icon-wodedianping" title="编辑" data-name="priority"></i>
					</td>
				</tr>
				<tr>
					<td class="layui-td-gray">预估工时</td>
					<td class="hover-edit"><span id="plan_hours_{$detail.id}" data-val="">{$detail.plan_hours}</span><i class="iconfont icon-wodedianping" title="编辑" data-name="plan_hours"></i></td>
					<td class="layui-td-gray2">计划完成日期</td>
					<td  class="hover-edit"><span id="end_time_{$detail.id}" data-val="">{$detail.end_time| date='Y-m-d'}</span>{gt name="$detail.delay" value="0"}<span class="layui-badge ml-2">逾期 {$detail.delay} 天</span>{/gt}<i class="iconfont icon-wodedianping" title="编辑" data-name="end_time"></i></td>
					<td class="layui-td-gray">任务状态</td>
					<td class="hover-edit">
						<span class="color-flow-{$detail.flow_status}" id="flow_status_{$detail.id}" data-val="{$detail.flow_status}">{$detail.flow_name}</span><i class="iconfont icon-wodedianping" title="编辑" data-name="flow_status"></i>
					</td>
				</tr>
				<tr>
					<td class="layui-td-gray">实际工时</td>
					<td class="hover-edit">{eq name="$detail.work_hours" value="0"}-{else/}{$detail.work_hours}{/eq}</td>
					<td class="layui-td-gray2">实际完成日期</td>
					<td  class="hover-edit">{eq name="$detail.over_time" value="0"}-{else/}{$detail.over_time| date='Y-m-d'}{/eq}</td>
					<td class="layui-td-gray">完成进度</td>
					<td  class="hover-edit"><span class="color-done_ratio-{$detail.done_ratio}" id="done_ratio_{$detail.id}" data-val="{$detail.done_ratio}">{$detail.done_ratio}%</span><i class="iconfont icon-wodedianping" title="编辑" data-name="done_ratio"></i>
					</td>
				</tr>
			</table>
			<div class="md-content hover-edit">
				<h5 class="py-4">任务描述<i class="iconfont icon-wodedianping" title="编辑" data-name="md_content"></i></h5>
				<div class="md-content-content" id="md_content_{$detail.id}" data-val="{$detail.md_content}">{$detail.content|raw}</div>
			</div>
			<div>
				<h5 class="py-4">文件附件</h5>
				<div id="file_{$detail.id}">
					<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="testList">选择文件并上传</button> <span style="color:#FF5722; font-size:12px; margin-left: 10px;">上传前，请规范命名，最大只能上传{:get_system_info('upload_max_filesize')}的文件，超过请压缩成多个文件上传。</span>
					<div class="layui-upload-list" {empty name="$file_array"}style="display:none;"{/empty}>
						<table class="layui-table">
							<thead>
								<tr>
								<th width="55%">文件名</th>
								<th width="15%" style="text-align:center">文件大小</th>
								<th width="15%" style="text-align:center">上传人</th>
								<th width="15%" style="text-align:center">操作</th>
								</tr>
							</thead>
							<tbody id="demoList">
								{volist name="file_array" id="vo"}
									<tr data-id="{$vo.id}" id="tr_{$vo.id}">
										<td>{$vo.name}</td>
										<td style="text-align: center;">{$vo.admin_name}</td>
									  	<td style="text-align: center;">{$vo.filesize/1048576|round=2}MB</td>
										<td style="text-align: center;">
											<div class="layui-btn-group"><a class="layui-btn layui-btn-xs " href="{$vo.filepath}" download="{$vo.name}" data-id="{$vo.id}">下载</a>
											<span class="layui-btn layui-btn-xs layui-btn-danger file-delete" data-uid="{$vo.admin_id}" data-id="{$vo.id}">删除</span></div>
										</td>
									</tr>
								{/volist}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md3 p-4">
			<div class="pb-4 hover-edit">
				<p class="font-gray mb-2">关联产品：</p>
				<span id="product_id_{$detail.id}" data-val="{$detail.product_id}">
				{gt name="$detail.product_id" value="0"}{$detail.product_name}{else/}<span class="font-gray">未设置</span>{/gt}
				</span>
				<i class="iconfont icon-wodedianping" title="编辑" data-name="product_id"></i>
			</div>
			<div class="pb-4 hover-edit">
				<p class="font-gray mb-2">关联项目：</p>
				<span id="project_id_{$detail.id}" data-val="{$detail.project_id}">
					{gt name="$detail.project_id" value="0"}{$detail.project_name}{else/}<span class="font-gray">未设置</span>{/gt}
				</span>
				<i class="iconfont icon-wodedianping" title="编辑" data-name="project_id"></i>
			</div>
			<div class="pb-4 hover-edit">
				<p class="font-gray mb-2">关联需求：</p>
				<span id="requirements_id_{$detail.id}" data-val="{$detail.requirements_id}">
					{gt name="$detail.requirements_id" value="0"}{$detail.requirements_title}{else/}<span class="font-gray">未设置</span>{/gt}
				</span>
				<i class="iconfont icon-wodedianping" title="编辑" data-name="requirements_id"></i>
			</div>
			
			<div class="pb-4 mt-3">
				<h5 class="mb-1">工作记录<span class="layui-btn layui-btn-xs add-schedule right">+ 工作记录</span></h5>
				<div id="schedule_{$detail.id}">
					<span style="color:#999">暂无工作记录</span>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-tab layui-tab-brief px-4" lay-filter="docDemoTabBrief">
		<ul class="layui-tab-title">
			<li class="layui-this">员工评论({$detail.comments})</li>
			<li>操作日志({$detail.logs})</li>
		</ul>
		<div class="layui-tab-content p-0">
			<div class="layui-tab-item comment-list layui-show">
				<div class="comment-input my-2">
					<input type="text" id="commentInput" readonly placeholder="发表一下你的看法" class="layui-input" value="">
				</div>
				<div id="comment_task_{$detail.id}"></div>
			</div>
			<div class="layui-tab-item logs-list">
				<div id="log_task_{$detail.id}"></div>
			</div>
		</div>
	</div>   
</div>

<script>
function openInit() {
	const admin_id='{$detail.admin_id}';
	const detail_id='{$detail.id}';
	const opsData={
		flow_status:[
			{'id':1,'title':'待办的'},
			{'id':2,'title':'进行中'},
			{'id':3,'title':'已完成'},
			{'id':4,'title':'不解决'},
			{'id':5,'title':'已关闭'}
		],
		type:[
			{'id':1,'title':'任务'},
			{'id':2,'title':'缺陷'},
		],
		priority:[
			{'id':1,'title':'低'},
			{'id':2,'title':'中'},
			{'id':3,'title':'高'},
			{'id':4,'title':'紧急'}
		],
		done_ratio:[
			{'id':0,'title':'0%'},
			{'id':10,'title':'20%'},
			{'id':40,'title':'40%'},
			{'id':50,'title':'50%'},
			{'id':60,'title':'60%'},
			{'id':80,'title':'80%'},
			{'id':100,'title':'100%'}
		]
	}
	const layer = layui.layer,edit = layui.gouguEdit,comment = layui.gouguComment,schedule = layui.gouguSchedule,upload = layui.upload,gougu = layui.gougu;
	
	$('.hover-edit').hover(function(){
		$(this).addClass('hover-on');
	},function(){
		$(this).removeClass('hover-on');
	})
	
	$('.hover-edit').on('click','i',function(){
		let name=$(this).data('name');
		let show_txt=$('#'+name+'_'+detail_id).text().replace(/[\r\n\t]/g,"");
		let real_txt=$('#'+name+'_'+detail_id).data('val');
		if(real_txt === ''){
			real_txt = show_txt;
		}	
		editShow(detail_id,name,show_txt,real_txt);
	})
	
	$('#delBtn').on('click',function(){
		layer.confirm('确定要删除该任务吗？请慎重', {icon: 3, title:'提示'}, function(index){
			let callback = function(e){
				layer.closeAll();
				layer.msg(e.msg);
				setTimeout(function(){
					location.reload();
				},1000)
			}
			let postData={"id":detail_id};
			gougu.delete("/task/index/delete",postData,callback);
		});
	})
	
	upload.render({ 
		elem: '#testList'
		,url: '/api/index/upload'
		,accept: 'file' //普通文件
		,exts: 'jpeg|jpg|png|gif|doc|docx|ppt|pptx|xls|xlsx|pdf|zip|rar|7z' //只允许上传文件
		,before: function(obj){
			layer.msg('上传中...',{time: 3600000});
		}
		,done: function(res, index, upload){
			let callback = function(e){
				layer.msg('上传成功');
				gougu.load('/task/index/view?id='+detail_id);
			}
			let postData={'topic_id':detail_id,'file_id':res.data.id,'file_name':res.data.name,'module':'task'};
			gougu.post("/api/appendix/add",postData,callback);
		}
		,error: function(index, upload){
			layer.msg('上传失败');
		}
	});
	
	$('#demoList').on('click','.file-delete',function(){
		let id = $(this).data('id');
		let uid = $(this).data('uid');
		if(uid != GOUGU_DEV.uid){
			layer.msg('你不是该文件的上传人，无权限删除');
			return false;
		}
		layer.confirm('确定要删除该附件吗?', {icon: 3, title:'提示'}, function(index){
			let callback = function(e){
				layer.closeAll();
				layer.msg(e.msg);
				gougu.load('/task/index/view?id='+detail_id);
			}
			let postData={'id':id};
			gougu.delete("/api/appendix/delete",postData,callback);
		});
	})
	
	
	$('.add-schedule').on('click',function(){
		schedule.add(detail_id);
	})
	schedule.load(detail_id);
	
	//评论
	comment.load(detail_id,'task');
	$('#commentInput').on('click',function(){
		comment.editor(0,detail_id,0,0,'task','');
	})
	//回复
	$('#comment_task_'+detail_id).on('click','[data-event="replay"]',function(){
		let pid = $(this).data('id');
		let padmin_id = $(this).data('uid');
		comment.editor(0,detail_id,pid,padmin_id,'task','');
	})
	//编辑
	$('#comment_task_'+detail_id).on('click','[data-event="edit"]',function(){
		let id = $(this).data('id');
		let mdcontent=$('#comment_'+id).data('mdcontent');
		comment.editor(id,detail_id,0,0,'task',mdcontent);
	})
	
	//删除
	$('#comment_task_'+detail_id).on('click','[data-event="del"]',function(){
		let id = $(this).data('id');
		comment.del(id,detail_id,'task');
	})
	
	//操作记录
	comment.log(detail_id,'task');
	
	
	let loading=false;	
	let editPost = function(id,name,show_val,real_val){
		let callback = function (e) {
			layer.closeAll();
			if(e.code == 0){
				gougu.load('/task/index/view/id/'+id);
				if(layui.pageTable){
					setTimeout(function(){
						layui.pageTable.reload();
					},400)
				}
			}
			else{
				layer.msg(e.msg);
			}			
		}
		let postData={id:id};
		postData[name] = real_val;
		if(name=='md_content'){
			postData['content'] = show_val;
		}
		gougu.post("/task/index/add",postData,callback);
	}
	
	function editShow (id,name,show_txt,real_txt) {
		if(loading==true){
			return false;
		}
		if(name=="title" || name=="plan_hours"){
			edit.text(id,name,real_txt,editPost);
		}
		if(name=="end_time"){
			if(admin_id == GOUGU_DEV.uid){
				edit.date(id,name,real_txt,editPost);
			}else{
				layer.msg('您没权限修改，请联系创建人修改');
			}			
		}
		if(name =="director_uid"){
			edit.employee_one(id,name,show_txt,real_txt,editPost);
		}
		if(name =="assist_admin_ids"){
			edit.employee_more(id,name,show_txt,real_txt,editPost);
		}
		if(name=="flow_status" || name=="type" || name=="priority" || name=="done_ratio"){	
			edit.dropdown(id,name,real_txt,opsData[name],editPost);			
		}
		if(name=="cate"){	
			loading=true;
			gougu.get("/api/index/get_work",{},function(res){
				let data = res.data;
				loading=false;
				edit.dropdown(id,name,real_txt,data,editPost,1);
			});			
		}
		if(name=="product_id"){	
			if(admin_id == GOUGU_DEV.uid){
				loading=true;
				gougu.get("/api/index/get_product",{},function(res){
					let data = res.data;
					loading=false;
					edit.dropdown(id,name,real_txt,data,editPost,1);
				});	
			}else{
				layer.msg('您没权限修改，请联系创建人或负责人修改');
			}			
		}
		if(name=="project_id"){
			if(admin_id == GOUGU_DEV.uid){
				let product_id = $('#product_id_'+id).data('val');
				if(product_id == 0){
					layer.msg('请先关联产品');
					return false;
				}
				loading=true;
				gougu.get("/api/index/get_project",{pid:product_id},function(res){
					let data = res.data;
					loading=false;
					edit.dropdown(id,name,real_txt,data,editPost,1);
				});	
			}else{
				layer.msg('您没权限修改，请联系创建人或负责人修改');
			}
		}
		if(name=="requirements_id"){
			if(admin_id == GOUGU_DEV.uid){
				let project_id = $('#project_id_'+id).data('val');
				if(project_id == 0){
					layer.msg('请先关联项目');
					return false;
				}
				loading=true;
				gougu.get("/api/index/get_requirements",{pid:project_id},function(res){
					let data = res.data;
					loading=false;
					edit.dropdown(id,name,real_txt,data,editPost,1);
				});		
			}else{
				layer.msg('您没权限修改，请联系创建人修改');
			}			
		}
		if(name=="md_content"){
			edit.editor(id,name,real_txt,editPost);
		}
	}		
}
</script>